<div id="app" v-cloak>
    <el-scrollbar style="height: calc(100vh - 100px)">
        <el-form ref="form" :model="form" :rules="rules" label-width="100px">
            <el-form-item label="用户名" prop="username">
                <el-input v-model="form.username" style="width: 360px" placeholder="请输入用户名" />
            </el-form-item>
            <el-form-item label="昵称" prop="nickname">
                <el-input v-model="form.nickname" style="width: 360px" placeholder="请输入昵称" />
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input type="password" v-model="form.password" show-password style="width: 360px" placeholder="请输入密码" />
            </el-form-item>
            <el-form-item label="头像" prop="avatar">
                <mu-avatar-upload v-model="form.avatar"></mu-avatar-upload>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
                <el-input  v-model="form.email" style="width: 360px" placeholder="请输入邮箱" />
            </el-form-item>
            <el-form-item label="分组" prop="group_ids">
                <mu-tree-select :options="options.groupList" :multiple="true" placeholder="请选择分组" label-field="name" value-field="id" v-model="form.group_ids"></mu-tree-select>
            </el-form-item>
            <el-form-item label="状态" prop="status">
                <el-switch
                        v-model="form.status"
                        :active-value="1"
                        :inactive-value="0">
                </el-switch>
            </el-form-item>
        </el-form>
    </el-scrollbar>
    <div style="display: flex;justify-content: flex-end;margin-top: 20px" class="flex-column flex-item-center">
        <div >
            <el-button type="primary" @click="onSubmitAdd">立即创建</el-button>
            <el-button @click="onCancel">取消</el-button>
        </div>
    </div>
</div>